<template>
	<div class="recharge_page layer">
		<van-nav-bar :title="activeCurr.name + $t('recharge')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont_page">
			<van-cell :title="$t('home.selectNetwork')" :label="activeProtocol?.name" is-link :border="false"
				@click="hasNetwork = !hasNetwork" />
			<div class="qr_code">
				<img :src="qrcodeUrl" id="qrcodeUrl" class="qrcodeUrl" />
			</div>
			<div class="address">
				<p>
					{{activeProtocol.contract_address}}
				</p>
				<img src="@/assets/images/home/wallet/copy.png" class="copy"
					@click="$utils.copy(activeProtocol.contract_address);$toast.success($t('success'))" />
			</div>
		</div>
		<SelectNetwork v-if="hasNetwork" v-model="hasNetwork" :coinId="activeProtocol.network_id" :network="activeCurr.protocol" @change="changeNetwork" />
	</div>
</template>

<script>
	import Qrcode from 'qrcode'
	import SelectNetwork from './components/selectNetwork.vue'
	export default {
		components: {
			SelectNetwork,
		},
		data() {
			return {
				qrcodeUrl: '',
				currency_id: '',
				hasNetwork: false,
				activeCurr: {}, 
				activeProtocol: {},
			}
		},
		computed: {
			currencyList() {
				return this.$store.state.currencyList
			}
		},
		watch: {
			currencyList: {
				handler(val) {
					if (val && val.length > 0) {
						this.activeCurr = val.find(i => i.id == this.currency_id)
						this.activeProtocol = this.activeCurr.protocol[0]
						// console.log('activeProtocol', this.activeProtocol, val);
						this.getImg()
					}
				},
				deep: true,
			}
		},
		mounted() {
			this.currency_id = this.$route.query.id
			// console.log('currencyList', this.currencyList);
			if (this.currencyList && this.currencyList.length > 0) {
				this.activeCurr = this.currencyList.find(i => i.id == this.currency_id)
				this.activeProtocol = this.activeCurr.protocol[0]
				this.getImg()
			}
		},
		methods: {
			getImg() {
				Qrcode.toDataURL(
					this.activeProtocol.contract_address, {
						width: 240,
						height: 240,
						margin: 2
					},
					(err, url) => {
						if (err) {
							throw err
						}
						this.qrcodeUrl = url
					}
				)
			},
			changeNetwork(item) {
				this.activeProtocol = item
				this.getImg()
			}
		}
	}
</script>

<style scoped lang="less">
	.recharge_page {
		.cont_page {
			padding: 20px 0;

			.van-cell {
				background-color: #3D3D3D;
				border-radius: 16px;
				padding: 13px 20px;
				align-items: flex-end;

				&::after {
					// border-bottom: none;
				}

				::v-deep .van-cell__title {
					text-align: left;
					color: #fff;

					.van-cell__label {
						font-size: 14px;
						color: #fff;
					}
				}

				::v-deep .van-cell__right-icon {
					color: #fff;
				}

			}

			.qr_code {
				padding: 40px 0;

				.qrcodeUrl {
					border-radius: 16px;
				}
			}

			.address {
				width: 100%;
				height: 72px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20px;
				background-color: #3D3D3D;
				border-radius: 16px;

				p {
					max-width: 90%;
					word-wrap: break-word;
				}

				.copy {
					width: 14px;
					height: 14px;
					margin-left: 10px;
				}
			}
		}
	}
</style>